<template>
  <view
    class="header"
    :style="[{ paddingTop: 'calc(' + statusBarHeight + 'px + 44px)' }]"
    v-if="userInfo"
  >
    <view class="headerHd">
      <view class="bg"></view>
      <image
        class="bgImg"
        :src="userInfo.user_info.avatar"
        mode="aspectFill"
      ></image>
    </view>

    <view class="headerContent">
      <view class="userInfo">
        <view class="let">
          <image :src="userInfo.user_info.avatar" mode="aspectFill"></image>
        </view>
        <view class="rig">
          <view class="name">{{ userInfo.user_info.name }}</view>
          <view class="id"> ID: {{ userInfo.user_info.id }} </view>
        </view>
      </view>

      <view class="userInfoFooter">
        <view class="menu">
          <view class="item" @click="showPopup = true" v-if="!isUser || !getSetting">
            <view class="num">{{ userInfo.vote_count || 0 }}</view>
            <view class="name">{{
              $t("videoGoods.userInfo.praiseAndCollection")
            }}</view>
          </view>

          <view class="item" @click="gotoUrl('0')" v-if="!isUser || !getSetting">
            <view class="num">{{ userInfo.fans_count || 0 }}</view>
            <view class="name">{{ $t("videoGoods.userInfo.fans") }}</view>
          </view>

          <view class="item" @click="gotoUrl('1')">
            <view class="num">{{ userInfo.focus_count || 0 }}</view>
            <view class="name">{{ $t("videoGoods.list.follow") }}</view>
          </view>
        </view>

        <!-- {{ !isUser }}
        {{ !getSetting }} -->

        <view class="btn" v-if="!isUser">
          <view class="btnItem" :class="[isLike[1]]" @click="$emit('follow')">
            <i class="iconfont icon-add-select" v-if="isLike[1]"></i>
            {{ isLike[0] }}
          </view>
          <!-- <view class="btnItem" v-else @click="gotoUrl('2')">
            {{ $t("videoGoods.userInfo.edit") }}
          </view> -->
        </view>
      </view>
    </view>

    <u-popup
      mode="center"
      v-model="showPopup"
      :z-index="121"
      border-radius="24"
    >
      <view class="pop">
        <view class="popTitle">{{
          $t("videoGoods.userInfo.praiseAndCollection")
        }}</view>

        <view class="popList">
          <view class="popItem">
            <view class="icon">
              <i class="iconfont icon-good-fill"></i>
            </view>

            <view class="text">
              {{ $t("videoGoods.userInfo.currentLike") }}</view
            >

            <view class="num">{{ userInfo.up_count }}</view>
          </view>
          <view class="popItem">
            <view class="icon icon1">
              <i class="iconfont icon-collection-fill"></i>
            </view>

            <view class="text">
              {{ $t("videoGoods.userInfo.currentCollect") }}</view
            >

            <view class="num">{{ userInfo.collect_count }}</view>
          </view>
        </view>

        <view class="popBtn" @click="showPopup = false">
          {{ $t("common.confirm") }}</view
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    userInfo: {
      type: Object,
      default() {
        return null;
      },
    },

    isUser: {
      type: Boolean,
    },

    isLike: {
      type: Array,
    },

    getSetting: {
      type: Boolean,
    },
  },

  data() {
    return {
      showPopup: false,
    };
  },

  methods: {
    gotoUrl(type) {
      let { id, name } = this.userInfo.user_info;
      this.$utils.toUrl(
        `/videoGoods/fans/index?id=${id}&name=${encodeURIComponent(
          name
        )}&type=${type}`,
        "navigate"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.user {
  display: flex;
  flex-direction: column;
}

.header {
  position: relative;
  height: 554rpx;
}

.headerHd {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

  .bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
  }
}

.bgImg {
  width: 100%;
  height: 100%;
  filter: blur(10px);
}

.headerContent {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 30rpx;
  z-index: 3;
}

.userInfo {
  position: relative;
  display: flex;
  align-items: center;

  .let {
    margin-right: 24rpx;
    width: 124rpx;
    height: 124rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .rig {
    flex: 1;
    overflow: hidden;

    view {
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .name {
      padding-bottom: 10rpx;
      font-size: 36rpx;
      color: #fff;
    }

    .id {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.5);
    }
  }
}

.userInfoFooter {
  display: flex;
  align-items: center;
  padding: 120rpx 0 44rpx;

  .menu {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;

    .item {
      margin-right: 68rpx;
      text-align: center;
    }

    .num {
      padding-bottom: 6rpx;
      color: #fff;
      font-size: 34rpx;
    }

    .name {
      color: rgba(255, 255, 255, 0.5);
      font-size: 20rpx;
    }
  }

  .btn {
    margin-right: 20rpx;

    .iconfont {
      margin-right: 6rpx;
    }
  }

  .btnItem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160rpx;
    height: 58rpx;
    border: 1px solid #fff;
    font-size: 24rpx;
    color: #fff;
    transition: 0.3s all;

    &.on {
      border-color: #f82641;
      background: #f82641;
    }
  }
}

.pop {
  padding: 24rpx 0 50rpx;
  width: 80vw;
  text-align: center;
  overflow: hidden;
  // border-radius: 32px;
}

.popTitle {
  font-size: 32rpx;
  color: #262626;
  font-weight: bold;
}

.popBtn {
  margin: 0 auto;
  width: 260rpx;
  height: 76rpx;
  line-height: 76rpx;
  text-align: center;
  border-radius: 32px;
  background: #f0250e;
  font-size: 32rpx;
  color: #fff;
}

.popList {
  padding: 50rpx 152rpx;
}

.popItem {
  display: flex;
  align-items: center;
  padding: 24rpx 0;

  .icon {
    width: 48rpx;
    height: 48rpx;
    line-height: 48rpx;
    border-radius: 50%;
    overflow: hidden;
    background: #f82641;

    .iconfont {
      color: #fff;
    }

    &.icon1 {
      background: #fbb954;
    }
  }

  .text {
    padding: 0 16rpx;
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .num {
    font-size: 24rpx;
    color: #262626;
  }
}
</style>
